<template>
  <div class="app-container">
    <!--工具栏-->
    <div class="head-container">
      <div v-if="crud.props.searchToggle">
        <el-input
          v-model="query.keyword"
          clearable
          size="small"
          placeholder="请输入关键字查询"
          style="width: 200px;"
          class="filter-item"
        />
        <el-select v-model="query.deptId" style="width: 140px;" placeholder="公司" clearable class="filter-item" @change="crud.toQuery">
          <el-option v-for="item in deptList" :key="item.id" :label="item.name" :value="item.id" />
        </el-select>

        <el-select v-model="query.fromKind" style="width: 140px;" placeholder="切换前平台" clearable class="filter-item" @change="changePlat(1)">
          <el-option v-for="item in platList" :key="item.value" :label="item.label" :value="item.value" />
        </el-select>

        <el-select v-model="query.kind" style="width: 140px;" placeholder="切换后平台" clearable class="filter-item" @change="changePlat(2)">
          <el-option v-for="item in platList" :key="item.value" :label="item.label" :value="item.value" />
        </el-select>

        <el-select v-model="query.type" style="width: 140px;" placeholder="理由" clearable class="filter-item" @change="crud.toQuery">
          <el-option v-for="item in dict.user_desktop_change" :key="item.value" :label="item.label" :value="item.label" />
          <el-option label="管理员主动切换" :value="'管理员主动切换'" />
        </el-select>
        <date-range-picker v-model="query.createTime" class="date-item" />
        <rrOperation :crud="crud" />
      </div>
      <crudOperation />
    </div>
    <!--表单组件-->
    <el-dialog :close-on-click-modal="false" :before-close="crud.cancelCU" :visible.sync="crud.status.cu > 0" :title="crud.status.title" width="500px">
      <el-form ref="form" :model="form" :rules="rules" size="small" label-width="80px">
        <el-form-item label="用户ID" prop="userId">
          <el-input v-model="form.userId" style="width: 370px;" />
        </el-form-item>
        <el-form-item label="云桌面种类" prop="kind">
          <el-input v-model="form.kind" style="width: 370px;" />
        </el-form-item>
        <el-form-item label="审批状态" prop="status">
          <el-input v-model="form.status" style="width: 370px;" />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="crud.cancelCU">取消</el-button>
        <el-button :loading="crud.status.cu === 2" type="primary" @click="crud.submitCU">确认</el-button>
      </div>
    </el-dialog>
    <!--表格渲染-->
    <el-table ref="table" v-loading="crud.loading" stripe height="calc(100vh - 270px)" :data="crud.data" size="small" style="width: 100%;">
      <el-table-column prop="userId" label="申请人">
        <template slot-scope="scope">
          <el-tooltip class="item" effect="dark" :content="scope.row.nickName" placement="top-start">
            <span>{{ scope.row.username }}</span>
          </el-tooltip>
        </template>
      </el-table-column>
      <el-table-column prop="deptName" label="所属公司" />
      <el-table-column prop="fromKind" label="切换前平台" :formatter="formatKind2" />
      <el-table-column prop="kind" label="切换后平台" :formatter="formatKind" />
      <el-table-column prop="type" label="理由" />
      <el-table-column prop="description" label="具体描述" />
      <el-table-column prop="createTime" label="切换时间" />
    </el-table>
    <!--分页组件-->
    <pagination />
  </div>
</template>

<script>
import { userDesktopPass, userDesktopNoPass, getDesktopChangeLog, getDesktopDeptList } from '@/api/system/approve'
import CRUD, { presenter, header, form, crud } from '@brotherCrud/crud'
import rrOperation from '@brotherCrud/RR.operation'
import crudOperation from '@brotherCrud/CRUD.operation'
/* import udOperation from '@brotherCrud/UD.operation'*/
import pagination from '@brotherCrud/Pagination'
import _ from 'lodash'
import DateRangePicker from '@/components/DateRangePicker'
const defaultForm = { }
export default {
  name: 'UserDesktop',
  components: { pagination, crudOperation, rrOperation, DateRangePicker },
  mixins: [presenter(), header(), form(defaultForm), crud()],
  dicts: ['user_desktop_change'],
  cruds() {
    return CRUD({ title: '项目：用户云桌面关联', url: 'api/desktopChangeLog/selectAll', idField: 'userId', sort: '', crudMethod: { get: getDesktopChangeLog }, optShow: {
      add: false,
      edit: false,
      del: false,
      download: false,
      reset: true
    }})
  },
  data() {
    return {
      deptList: [],
      platList: [
        { label: '纵骥', value: 1 },
        { label: '泛云', value: 2 }
      ],
      reasonList: [],
      permission: {
        add: ['admin', 'approve:add'],
        edit: ['admin', 'approve:edit'],
        del: ['admin', 'approve:del'],
        approve: ['admin', 'userDesktop:approve']
      },
      rules: {
        userId: [
          { required: true, message: '用户ID不能为空', trigger: 'blur' }
        ],
        kind: [
          { required: true, message: '云桌面种类不能为空', trigger: 'blur' }
        ],
        status: [
          { required: true, message: '审批状态不能为空', trigger: 'blur' }
        ]
      },
      queryTypeOptions: [
        { key: 'userId', display_name: '用户ID' },
        { key: 'kind', display_name: '云桌面种类' },
        { key: 'status', display_name: '审批状态' }
      ]
    }
  },
  created() {
    getDesktopDeptList().then(res => {
      this.deptList = res
    })
  },
  methods: {
    changePlat(kindType) {
      const { fromKind, kind } = this.query
      if (fromKind && kind) {
        if (kindType === 1) {
          this.query.kind = ''
        } else {
          this.query.fromKind = ''
        }
      }

      this.crud.toQuery()
    },
    // 钩子：在获取表格数据之前执行，false 则代表不获取数据
    [CRUD.HOOK.beforeRefresh]() {
      if (Array.isArray(this.query.createTime) && this.query.createTime.length === 2) {
        this.query.startTime = this.query.createTime[0]
        this.query.endTime = this.query.createTime[1]
      } else {
        this.query.startTime = ''
        this.query.endTime = ''
      }
      // kind 需要
      if (this.query.kind) {
        this.crud.params.kind = this.query.kind
      } else if (this.query.fromKind) {
        this.crud.params.kind = 3 - parseInt(this.query.fromKind)
      } else {
        this.crud.params.kind = ''
      }

      return true
    },
    [CRUD.HOOK.afterRefresh](data) {
      // 清空菜单选中

    },
    // 格式化现云平台
    formatUserName(rowData) {
      let x = null
      if (rowData.user.id) {
        x = rowData.user.dept.name
      }
      return x
    },
    // 格式化现云平台
    formatUserId(rowData) {
      let x = null
      if (rowData.user.id) {
        x = rowData.user.nickName
      }
      return x
    },
    // 格式化现云平台
    formatKind(rowData) {
      let x = null
      switch (rowData.kind) {
        case 1:x = '纵骥'
          break
        case 2:x = '泛云'
          break
        default:
          x = '种类未知'
      }
      return x
    },
    formatKind2(rowData) {
      let x = null
      switch (rowData.kind) {
        case 1:x = '泛云'
          break
        case 2:x = '纵骥'
          break
        default:
          x = '种类未知'
      }
      return x
    },
    // formatStatus(rowData) {
    //   let x = null
    //   // 审批状态(-1:不通过, 0:审批中, 1:通过)
    //   switch (rowData.status) {
    //     case -1:x = '不通过'
    //       break
    //     case 0:x = '审批中'
    //       break
    //     case 1:x = '通过'
    //       break
    //     default:
    //       x = '状态未知'
    //   }
    //   return x
    // },
    // 同意
    doAgree(userId) {
      this.$confirm('确定同意吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.sureAgree(userId)
      })
    },
    // 确定同意
    sureAgree(userId) {
      userDesktopPass(userId).then(() => {
        this.crud.notify('同意成功', CRUD.NOTIFICATION_TYPE.SUCCESS)
        // this.crud.data.map(function(item) {
        //   if (item.userId === userId[0]) {
        //     item.status = 1
        //   }
        // })
        this.crud.toQuery()
      })
    },
    // 拒绝
    doRefuse(userId) {
      this.$confirm('确定拒绝吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.sureRefuse(userId)
      })
    },
    // 确定拒绝
    sureRefuse(userId) {
      userDesktopNoPass(userId).then(() => {
        this.crud.notify('拒绝成功', CRUD.NOTIFICATION_TYPE.SUCCESS)
        // this.crud.data.map(function(item) {
        //   if (item.userId === userId[0]) {
        //     item.status = -1
        //   }
        // })
        this.crud.toQuery()
      })
    },
    // 批量同意
    doAllAgree(list) {
      const userIdList = []
      list.map(item => {
        userIdList.push(item.userId)
      })
      if (_.isEmpty(userIdList)) {
        this.crud.notify('请先勾选需要同意的申请人', CRUD.NOTIFICATION_TYPE.WARNING)
      } else {
        this.doAgree(userIdList)
      }
    },
    // 批量拒绝
    doAllRefuse(list) {
      const userIdList = []
      list.map(item => {
        userIdList.push(item.userId)
      })
      if (_.isEmpty(userIdList)) {
        this.crud.notify('请先勾选需要拒绝的申请人', CRUD.NOTIFICATION_TYPE.WARNING)
      } else {
        this.doRefuse(userIdList)
      }
    }
  }
}
</script>

<style scoped>

</style>
